<template>
  <page-container title="个人中心" :showBack="false">
    <view class="mine-container">
      <!-- 顶部登录区域 -->
      <view class="login-section">
        <view class="login-info" @click="goLogin" v-if="!isLoginFlag">
          <text class="login-title">登录/注册</text>
          <text class="login-subtitle">点击登录,享受更多精彩信息</text>
        </view>
        <view class="user-info" v-if="isLoginFlag && customerInfo">
          <view class="user-name-box">
            <text class="user-name">{{ customerInfo.cusName }}</text>
            <text class="user-name-type">{{ customerInfo.customerTypeDesc }}认证</text>
            <text class="user-name-desc" v-if="customerInfo.customerType === 'PERSONAL'" @click.stop="goUpgrade">
              升级为企业用户
              <uni-icons type="right" size="12" color="#d4af37"></uni-icons>
            </text>
          </view>
          <view class="user-phone-box">
            <text class="user-phone">{{ customerInfo.cusPhone }}</text>
          </view>
        </view>
        <view class="avatar-section">
          <view class="avatar-placeholder">
            <image class="avatar-icon" v-if="customerInfo.avatar" :src="customerInfo.avatar" mode="widthFix"></image>
            <image class="avatar-icon" v-else src="/static/header.png" mode="widthFix"></image>
          </view>
        </view>
      </view>

      <!-- 定金卡片 -->
      <view class="deposit-card">
        <view class="deposit-header">
          <text class="deposit-label">可用定金(元)</text>
        </view>
        <view class="deposit-amount">
          <text class="amount-text">{{ formatNumber(customerInfo.balance) }}</text>
        </view>
        <view class="deposit-actions">
          <view class="deposit-btn deposit-in" @click="goDeposit('in')">
            <text class="btn-text">入款/入料</text>
          </view>
          <view class="deposit-btn deposit-out" @click="goDeposit('out')">
            <text class="btn-text">回款/回料</text>
          </view>
        </view>
      </view>

      <!-- 快捷功能 -->
      <view class="quick-actions">
        <view class="quick-btn" @click="goCapitalFlow">
          <image src="/static/index/pipelined.png" mode="widthFix"></image>
          <text class="quick-text">资金流水</text>
        </view>
        <view class="quick-btn" @click="goBankCard">
          <image src="/static/index/bankCard.png" mode="widthFix"></image>
          <text class="quick-text">银行卡</text>
        </view>
        <view class="quick-btn" @click="goListPage" v-if="false">
          <image src="/static/index/mineOrder.png" mode="widthFix"></image>
          <text class="quick-text">我的列表</text>
        </view>
      </view>

      <!-- 我的常用 -->
      <view class="favorites-section" v-if="false">
        <view class="section-header">
          <text class="section-title">我的常用</text>
        </view>
        <view class="favorites-grid">
          <view class="favorite-item" v-for="(item, index) in favoriteItems" :key="index"
            @click="goPaymentRecord(item)">
            <image :src="item.icon" mode="widthFix"></image>
            <view class="favorite-text">{{ item.text }}</view>
          </view>
        </view>
      </view>

      <!-- 设置 -->
      <view class="settings-section">
        <view class="section-header setting-header" @click="goSetting('设置')">
          <text class="section-title setting-title">设置</text>
          <image class="setting-arrow" src="/static/index/gray-right.png" mode="widthFix"></image>
        </view>
        <view class="settings-list">
          <view class="setting-item" v-for="(item, index) in settingItems" :key="index" @click="goSetting(item)">
            <view class="setting-row">
              <view class="setting-left">
                <text class="setting-text">{{ item.text }}</text>
              </view>
              <view class="setting-right">
                <view v-if="item.type === 'toggle'" class="toggle-switch" :class="{ active: item.value }">
                  <view class="toggle-slider"></view>
                </view>
                <image v-else :class="['setting-arrow', { expanded: item.expanded }]" src="/static/index/gray-right.png"
                  mode="widthFix"></image>
              </view>
            </view>
            <view v-if="item.expanded" class="setting-content" @click.stop="makeCall(item.phone)">{{ item.content }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </page-container>
</template>

<script>
import { isLoggedIn, checkLogin } from '@/utils/auth'
import config from '@/config'
export default {
  name: 'MinePage',
  data() {
    return {
      isLoginFlag: false,
      favoriteItems: [
        { icon: '/static/index/remind.png', text: '到价提醒' },
        { icon: '/static/index/mineOrder.png', text: '提料记录' },
        { icon: '/static/index/mineOrder.png', text: '付料记录' },
        { icon: '/static/index/customer.png', text: '我的客户' },
        { icon: '/static/index/contract.png', text: '合同管理' }
      ],
      settingItems: [
        // { text: '深色模式', type: 'toggle', value: false },
        { text: '联系电话', type: 'arrow', content: '18938918032', expanded: false, phone: '18938918032' },
        { text: '公司地址', type: 'arrow', content: '深圳市罗湖区水贝二路A座1702', expanded: false, address: '深圳市罗湖区水贝二路A座1702' }
      ],
      customerInfo: {}
    }
  },
  onShow() {
    this.isLoginFlag = isLoggedIn()

    if (this.isLoginFlag) {
      this.getCustomerInfo()
    }
  },
  methods: {
    // 格式化数字，添加千分符
    formatNumber(num) {
      if (num === null || num === undefined || num === '') {
        return '--';
      }
      const number = parseFloat(num);
      if (isNaN(number)) {
        return '--';
      }
      return number.toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
    },
    getCustomerInfo() {
      this.$http.get('/applet/customer/info').then(res => {
        this.customerInfo = res.data || {}
        if(this.customerInfo.avatar){
          this.customerInfo.avatar = config.imgUrl + res.data.avatar
        }
        uni.setStorageSync('customerInfo', res.data || {})
      })
    },
    goLogin() {
      // #ifdef MP-WEIXIN
      uni.navigateTo({
        url: '/pages/login/quick'
      })
      // #endif
      // #ifdef H5
      uni.navigateTo({
        url: '/pages/login/index'
      })
      // #endif
    },
    goUpgrade() {
      uni.showToast({
        title: '请联系业务员,提交资料完成升级',
        icon: 'none'
      })
      // uni.navigateTo({
      //   url: '/pages/mine/upgrade/index'
      // })
    },
    goDeposit(type) {
      if (!checkLogin()) {
        return
      }
      switch (type) {
        case 'in':
          uni.navigateTo({
            url: '/pages/mine/depositIn/index'
          })
          break
        case 'out':
          uni.navigateTo({
            url: '/pages/mine/depositOut/index'
          })
          break
      }
    },
    goCapitalFlow() {
      if (!checkLogin()) {
        return
      }
      uni.navigateTo({
        url: '/pages/mine/capitalFlow/index'
      })
    },
    goBankCard() {
      if (!checkLogin()) {
        return
      }
      uni.navigateTo({
        url: '/pages/mine/bankCard/index'
      })
    },
    goListPage() {
      // if (!checkLogin()) {
      //   return
      // }
      uni.navigateTo({
        url: '/pages/mine/listPage/index'
      })
    },
    goPaymentRecord(item) {
      if (!checkLogin()) {
        return
      }
      let type = item.text
      switch (type) {
        case '付料记录':
          uni.navigateTo({
            url: '/pages/mine/paymentRecord/index'
          })
          break
        // case '提料记录':
        //   uni.navigateTo({
        //     url: '/pages/mine/paymentRecord/index'
        //   })
        //   break
        // case '到价提醒':  
        //   uni.navigateTo({
        //     url: '/pages/mine/remind/index'
        //   })
        //   break
        // case '我的客户':  
        //   uni.navigateTo({
        //     url: '/pages/mine/customer/index'
        //   })
        //   break
        // case '合同管理':    
        //   uni.navigateTo({
        //     url: '/pages/mine/contract/index'
        //   })
        //   break
      }
    },
    goSetting(item) {
      if (!checkLogin()) {
        return
      }
      let type = item.text || item
      switch (type) {
        case '联系电话':
          item.expanded = !item.expanded
          break
        case '公司地址':
          item.expanded = !item.expanded
          break
        case '设置':
          uni.navigateTo({
            url: '/pages/mine/setting/index'
          })
          break
      }
    },
    makeCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    }
  }
}
</script>

<style scoped lang="scss">
.mine-container {
  min-height: 100vh;
  background-color: #f5f5f6;
  padding-top: 20rpx;
}

/* 登录区域 */
.login-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #ffffff;
}

.login-info {
  flex: 1;
}

.login-title {
  display: block;
  font-size: 36rpx;
  color: $uni-text-color-orange;
  margin-bottom: 10rpx;
}

.login-subtitle {
  display: block;
  font-size: 28rpx;
  color: #999999;
}

.avatar-section {
  margin-left: 30rpx;

  .avatar-placeholder {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;

    .avatar-icon {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 1rpx solid #EEEEEE;
    }
  }
}





/* 定金卡片 */
.deposit-card {
  margin: 30rpx;
  background: linear-gradient(135deg, #d5b273 0%, #edce87 100%);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
}

.deposit-header {
  margin-bottom: 20rpx;
}

.deposit-label {
  font-size: 28rpx;
  color: #ffffff;
}

.deposit-amount {
  margin-bottom: 40rpx;
}

.amount-text {
  font-size: 60rpx;
  color: #ffffff;
  font-weight: bold;
}

.deposit-actions {
  display: flex;
  gap: 20rpx;
}

.deposit-btn {
  flex: 1;
  padding: 20rpx;
  border-radius: 120rpx;
  text-align: center;
}

.deposit-in {
  background-color: #f9e7c1;
}

.deposit-out {
  background-color: #333333;
}

.btn-text {
  font-size: 28rpx;
  color: #ffffff;
  letter-spacing: 2rpx;
}

.deposit-in {
  .btn-text {
    color: #0B1F20;
  }
}

/* 快捷功能 */
.quick-actions {
  display: flex;
  margin: 0 30rpx 30rpx;
  gap: 15rpx;
  flex-wrap: wrap;
}

.quick-btn {
  flex: 1;
  min-width: 200rpx;
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 25rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }
}

.quick-icon {
  font-size: 40rpx;
}

.quick-text {
  font-size: 28rpx;
  color: #0B1F20;
}

/* 我的常用 */
.favorites-section {
  margin: 0 30rpx 30rpx;
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 30rpx;
}

.section-header {
  margin-bottom: 40rpx;
}

.setting-header {
  padding-bottom: 20rpx;
  margin-bottom: 0;
  border-bottom: 2rpx solid #EEEEEE;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 32rpx;
  color: #0B1F20;
}

.setting-title {
  font-size: 28rpx;
}

.favorites-grid {
  display: flex;
  justify-content: space-between;
}

.favorite-item {
  text-align: center;

  image {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 15rpx;
  }
}

.favorite-icon {
  font-size: 40rpx;
  margin-bottom: 15rpx;
}

.favorite-text {
  font-size: 24rpx;
  color: #666666;
}

/* 设置 */
.settings-section {
  margin: 0 30rpx 30rpx;
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 30rpx;
}

.settings-list {
  margin-top: 20rpx;
}

.setting-item {
  display: block;
  padding: 25rpx 0;
  border-bottom: 2rpx solid #EEEEEE;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-text {
  font-size: 28rpx;
  color: #0B1F20;
}

.setting-arrow {
  width: 28rpx;
  height: 28rpx;
  transition: transform 0.2s ease;
}

.setting-arrow.expanded {
  transform: rotate(90deg);
}

.setting-content {
  margin-top: 20rpx;
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
  word-break: break-all;
}

/* 开关样式 */
.toggle-switch {
  width: 60rpx;
  height: 30rpx;
  background-color: #cccccc;
  border-radius: 15rpx;
  position: relative;
  transition: background-color 0.3s ease;
}

.toggle-switch.active {
  background-color: #ff9800;
}

.toggle-slider {
  width: 26rpx;
  height: 26rpx;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 2rpx;
  left: 2rpx;
  transition: transform 0.3s ease;
}

.toggle-switch.active .toggle-slider {
  transform: translateX(30rpx);
}

.user-info {
  display: flex;
  flex-direction: column;

  .user-name-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;

    .user-name {
      font-size: 40rpx;
      color: #0B1F20;
      width: 200rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-name-type {
      font-size: 20rpx;
      color: $uni-text-color-orange;
      margin-left: 16rpx;
      background-color: #333333;
      padding: 2rpx 20rpx;
      border-radius: 50rpx;
    }

    .user-name-desc {
      font-size: 20rpx;
      color: $uni-text-color-orange;
      margin-left: 16rpx;
    }
  }

  .user-phone-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999999;
    letter-spacing: 2rpx;
  }
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .mine-container {
    padding-bottom: 120rpx;
  }
}
</style>
